<template>
	<view class="questions">
		<view class="test-header">
			<view @click="showModal">
				<view><image src="https://mp-7c5f2fa7-1d2c-41f1-b3dd-1f45e490fd36.cdn.bspapp.com/cloudstorage/78a6ac6e-7d6f-443c-aef8-95cd526e3e83.png"></image></view>
				<text>交卷</text>
			</view>
			<!-- <view>倒计时 10:00</view> -->
			<view>{{options.title}}</view>
			<view @click="showFixed">题标 {{swiperIndex}}/{{lists.length}}</view>
		</view>
		<swiper :current="swiperIndex - 1" @change="swiperChange" class="questions-cont">
			<swiper-item v-for="(item,index) in lists" :key="index" class="swiper-item">
				<view class="test-main">
					<view class="test-title">
						<text v-if="item.code == 1">单选</text>
						<text v-else>多选</text>
						{{item.title}}
						<view class="test-title-img" v-if="item.src_title != ''">
							<image :src="item.src_title"></image>
						</view>
					</view>
					<view class="test-cont">
						<view v-for="(item2,index2) in item.testList" :key="index2" @click="testItem(index,index2,item.code)" 
						:class="{active_true:(!item.code2 && item2.code) || (item.code == 2 && item2.click_index),active:(item.code == 1 && item2.click_index && !item2.code) || (item.code == 2 && item2.click_index && !item2.code && !item.code2)}">
							<view>{{item.option[index2]}}</view>
							<text v-if="item.isimg == 1">{{item2.name}}</text>
							<image v-else :src="item2.name"></image>
						</view>
					</view>
				</view>
				<view class="test-btn" @click="btnNext(index)" v-if="item.code == 2 && item.code2">
					确认选项
				</view>
				<view class="test-describe" v-if="!item.code2">
					<view class="describe-title">
						<text>本题描述</text>
					</view>
					<view class="describe-cont">
						<text>正确答案：<text v-for="(item2,index2) in item.true_option" :key="index2">{{item.option[item2]}}</text></text>
						<text>您选择的是：<text v-for="(item3,index3) in item.current" :key="index3">{{item.option[item3]}}</text></text>
						<text>原因：{{item.alt}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="fixed-bottom" :class="{active:show_hide}" @click.stop="hideFixed">
			<view class="tibiao" @click.stop>
				<view class="tibiao-bar">
					<text class="tibiao-no3">{{choice[2]}}</text><!-- 未选择 -->
					<view class="tibiao-null"></view>
					<text class="tibiao-no2">{{choice[1]}}</text><!-- 选择错误 -->
					<view class="tibiao-no"></view>
					<text class="tibiao-yes2">{{choice[0]}}</text><!-- 选择正确 -->
					<view class="tibiao-yes"></view>
				</view>
				<view>
					<text v-for="(item,index) in lists.length" :key="index"
					:class="{active_o:lists[index].topic && !lists[index].code2,active_t:!lists[index].topic && !lists[index].code2}"
					@click="topic(index)">{{item+1}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				cj:{},
				options:{},
				swiperIndex:1,//swiper 当前下标
				show_hide:true,//题标是否隐藏 默认false 为隐藏
				istest:1,//1为练习 2为模拟 3为考试
				choice:[0,0,0],//[选择正确，选择错误，未选择]
				//choice:[2,2,5],//[选择正确，选择错误，未选择]
				lists:[]
			}
		},
		async onLoad(options = {}) {
			_this = this;
			vk = uni.vk;
			this.options = options;
			//console.log(this.options)
			this.cj.title = this.options.title
			this.cj.user = vk.getVuex("$user.userInfo");
			this.cj.stxxws = vk.getVuex("$user.stxxws");
			console.log(this.cj)
			await this.getsttms();
			//console.log(this.cj)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			addcj(){
				vk.callFunction({
				  url: 'client/jp/pub/stgl-cjapi.addcj',
				  title: '请求中...',
				  data: {
					..._this.cj
				  },
				  success: (data) => {
					console.log(data)
				  },
				  fail: (err) => {
					
				  },
				  complete: (res) => {
					
				  }
				});
			},
			getsttms(){
				return vk.callFunction({
				  url: 'client/jp/pub/sttmapi.getSttmList',
				  title:'请求中...',
				  data:{
				    stid:this.options.stid
				  }
				}).then((data) => {
				  //console.log(data.list)
				  this.lists = data.list
				  this.choice[2] = this.lists.length
				}).catch((err) => {
				  
				});
			},
			// 页面数据初始化函数
			init(options){
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			showModal(){// 左上角交卷
			let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认要交卷吗？',
				    success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.cj.cj = that.choice[0];
							_this.addcj();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
				    }
				});
				
			},
			swiperChange(e){ //swiper滑动
				this.swiperIndex = e.detail.current + 1; //当前题
			},
			testItem(a,b,c){// a:当前题  b:当前选项 c:单选多选】
				let that = this
				if(that.lists[a].code2){//当前题是否已选
					that.lists[a].testList[b].click_index = !that.lists[a].testList[b].click_index//切换选项选中状态
					if(c == 1){//为1 表示单选
						that.lists[a].code2 = false //为false 则表示已选
						that.lists[a].current = [b]
						if(that.lists[a].testList[b].code){
							that.lists[a].topic = true
							that.swiperIndex ++
							that.choice[0] ++
							that.choice[2] --
						}else{
							that.lists[a].topic = false
							that.choice[1] ++
							that.choice[2] --
						}
					}
				}
			},
			btnNext(e){ //多选 确认按钮
				let that = this
				let a = []
				that.lists[e].testList.forEach( (item,index) =>{
					if(item.click_index == true){
						that.lists[e].current.push(index)
						if(item.code == true){
							a.push(index)
						}
					}
				})
				console.log(that.lists[e].current.length > 0);
				if(that.lists[e].current.length > 0){
					that.lists[e].code2 = false
					if(a.length == that.lists[e].true_option.length && a.length == that.lists[e].current.length){
						that.lists[e].topic = true
						this.swiperIndex ++
						that.choice[0] ++
						that.choice[2] --
					}else{
						that.lists[e].topic = false
						that.choice[1] ++
						that.choice[2] --
					}
				}else{
					uni.showToast({
					    title: '请选择选项',
						icon:'none',
					    duration: 1500
					});
				}
			},
			topic(e){
				console.log('topic')
				//console.log(this.lists[e].true_option,this.lists[e].current,!this.lists[e].code2);
				this.swiperIndex = e + 1
				this.show_hide = !this.show_hide
			},
			showFixed(){
				this.show_hide = !this.show_hide
			},
			hideFixed(){
				this.show_hide = !this.show_hide
			},
			nullFixed(){
				//占位 不可删
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss">
	page{
		height:100%;
		background:#f5f5f5;
	}
	.questions{
		height:100%;
		position: relative;
		.test-header{
			position: absolute;
			top:0;
			left:0;
			z-index: 10;
			width: 100%;
			padding:0 30rpx;
			display: flex;
			justify-content: space-between;
			height:34px;
			line-height: 34px;
			border-bottom: solid 1px #ddd;
			background: #f5f5f5;
			view{
				color:#555;
				font-size: 14px;
				display: flex;
				image{
					margin-top:10px;
					margin-right:5px;
					width:14px;
					height:14px;
				}
				&:nth-child(1){
					font-size: 12px;
					text{
						color:#666;
					}
				}
				&:nth-child(3){
					font-size: 12px;
					text{
						color:#666;
					}
				}
			}
		}
		.questions-cont{
			height:100%;
			display: flex;
			flex-wrap: nowrap;
			transition: all .5s;
			.swiper-item{
				width:100vw;
				min-width:100vw;
				max-width:100vw;
				height:100%;
				overflow: auto;
				.test-main{
					padding:0 20rpx;
					margin:49px 30rpx;
					margin-bottom: 20px;
					background:#fff;
					.test-title{
						font-size: 16px;
						color:#333;
						padding:20rpx 0;
						text{
							font-size: 10px;
							color:#fff;
							background:#aaa;
							padding:2px 5px;
							margin-right:5px;
							border-radius: 3px;
						}
						.test-title-img{
							margin:20rpx auto;
							text-align: center;
							image{
								max-width:500rpx;
								max-height:250rpx;
							}
						}
					}
					.test-cont{
						display: flex;
						flex-direction: column;
						padding-bottom: 20rpx;
						&>view{
							min-height: 40px;
							line-height: 40px;
							display: flex;
							view{
								width:30px;
								height:30px;
								line-height: 30px;
								margin-top:4px;
								margin-right:7px;
								font-size: 14px;
								border:solid 1px #ddd;
								border-radius: 50%;
								box-shadow:2px 2px 5px #e5e5e5;
								text-align: center;
								color:#666;
							}
							image{
								max-width: 560rpx;
								max-height:280rpx;
								margin-bottom: 20rpx;
							}
							text{
								font-size: 13px;
								color:#555;
							}
							&.active_true{
								view{
									background:#1a7bb9;
									border:solid 1px #1a7bb9;
									color:#fff;
									font-size: 15px;
								}
								text{
									color:#1a7bb9;
								}
							}
							&.active{
								view{
									background:#FF6667;
									border:solid 1px #FF6667;
									color:#fff;
									font-size: 15px;
								}
								text{
									color:#FF6667;
								}
							}
						}
					}
				}
				.test-btn{
					background:#1FB19E;
					font-size: 14px;
					border-radius: 6px;
					text-align: center;
					line-height: 40px;
					color:#fff;
					height:40px;
					width:150px;
					margin:20px auto;
				}
				.test-describe{
					padding:0 20rpx;
					margin-bottom: 20px;
					border-top:solid 1px #ccc;
					.describe-title{
						height:48px;
						line-height: 48px;
						display: flex;
						text{
							color:#666;
							font-size: 12px;
						}
						image{
							width:14px;
							height:14px;
							margin-top:17px;
							margin-left:3px;
						}
					}
					.describe-cont{
						background:#f5f5f5;
						padding:12rpx;
						display: flex;
						flex-direction: column;
						&>text{
							color:#666;
							font-size: 14px;
							line-height: 24px;
							&:nth-child(3){
								font-size: 12px;
								line-height: 20px;
							}
						}
					}
				}
			}
		}
		.fixed-bottom{
			width:100%;
			height:100%;
			position: fixed;
			left:0;
			top:0;
			z-index: 999;
			background:rgba(0,0,0,.4);
			pointer-events: none;
			opacity: 0;
			transition:all .3s;
			.tibiao{
				position: absolute;
				bottom:0;
				left:0;
				background: #fff;
				width:100%;
				overflow: auto;
				height: 50%;
				padding:30rpx 20rpx;
				.tibiao-bar{
					display: flex;
					flex-direction: row-reverse;
					padding-bottom: 30rpx;
					border-bottom: solid 1px #ddd;
					height:16px;
					line-height: 16px;
					view{
						width:10px;
						height:10px;
						border-radius: 50%;
						margin-left: 30rpx;
						margin-top:3px;
						&.tibiao-yes{
							background:#1a7bb9;
						}
						&.tibiao-no{
							background:#FF6667;
						}
						&.tibiao-null{
							background:#999;
						}
					}
					text{
						margin-left:3px;
						display: inline-block;
						font-size: 13px;
						&.tibiao-yes2{
							color:#1a7bb9;
						}
						&.tibiao-no2{
							color:#FF6667;
						}
						&.tibiao-no3{
							color:#666;
						}
					}
				}
				&>view{
					&:nth-child(2){
						text{
							margin-left:22rpx;
							margin-top:10rpx;
							display: inline-block;
							width:100rpx;
							height:100rpx;
							line-height: 100rpx;
							text-align: center;
							border-radius: 50%;
							font-size: 14px;
							color:#666;
							background:#e4e4e4;
							&:nth-child(6n+1){
								margin-left:0;
							}
							&.active_o{
								background:#beddf1;
								color:#1a7bb9;
							}
							&.active_t{
								background:#fecece;
								color:#e3494a;
							}
						}
					}
				} 
			}
			&.active {
				opacity: 1;
				pointer-events: auto;
				transition:all .3s;
			}
		}
	}
	
</style>